import {inject, observer} from 'mobx-react';
import {routerShape} from 'react-router';
import {WeaTop, WeaTab, WeaLocaleProvider, WeaRightMenu} from 'ecCom';
import {WeaTableNew} from "comsMobx";
import * as mobx from "mobx";
import {Condition, getAdButtons} from './Condition';

const WeaTable = WeaTableNew.WeaTable;
const getLabel = WeaLocaleProvider.getLabel;

@inject('standardCustomReportListStore')
@observer
export default class Main extends React.Component {
    static contextTypes = {
        router: routerShape
    }
    componentDidMount() {
        const {standardCustomReportListStore = {}} = this.props;
        standardCustomReportListStore.loadCondition();
    }
    componentWillUnmount(){
        const {standardCustomReportListStore = {}} = this.props;
        standardCustomReportListStore.resetForm();
    }

    componentWillReceiveProps(nextProps) {
        if(this.props.location.key !== nextProps.location.key) {
            const {standardCustomReportListStore = {}} = this.props;
            standardCustomReportListStore.resetForm();
            standardCustomReportListStore.loadCondition();
        }
    }

    render() {
        const {standardCustomReportListStore} = this.props;
        const {tableStore, showSearchAd,loading,form} = standardCustomReportListStore;
        const formParams = form.getFormParams() || {};
        const tabTitle = getLabel(20412, '自定义报表');
        return (
            <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@2601m1`}
                collectParams={{favname: tabTitle, favouritetype: '2'}}
                datas={this.getRightMenu()}
            >
                <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@8ql75q`} loading={loading} icon={<i className='icon-coms-workflow'/>} buttons={[]}
                        iconBgcolor='#0079DE' title={tabTitle} showDropIcon={true}
                        dropMenuDatas={this.getRightMenu()}>
                    <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@02zute`} onSearch={() => standardCustomReportListStore.doSearch()}
                            onSearchChange={v => standardCustomReportListStore.appendFormFields({reportname: {value: v}})}
                            searchType={['base', 'advanced']}
                            searchsBaseValue={formParams.reportname}
                            setShowSearchAd={bool => standardCustomReportListStore.setShowSearchAd(bool)}
                            hideSearchAd={() => standardCustomReportListStore.setShowSearchAd(false)}
                            showSearchAd={showSearchAd}
                            buttonsAd={getAdButtons(standardCustomReportListStore, this.props && this.props.ecId || '')}
                            searchsAd={<Condition ecId={`${this && this.props && this.props.ecId || ''}_Condition@kbi4p8`} listStore={standardCustomReportListStore}/>}
                            loading={loading}
                            advanceHeight={125}
                    />
                    <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@sltc5t`} comsWeaTableStore={tableStore} needScroll={true} getColumns={this.getColumns.bind(this)}/>
                </WeaTop>
            </WeaRightMenu>
        )
    }

    getRightMenu() {
        const {standardCustomReportListStore} = this.props;
        const {tableStore} = standardCustomReportListStore;
        let btns = [];
        btns.push({
            key: "colSet",
            icon: <i className='icon-coms-Custom'/>,
            content: getLabel(32535, '显示列定制'),
            onClick: key => {
                tableStore.setColSetVisible(true);
                tableStore.tableColSet(true);
            }
        });
        return btns;
    }

    getColumns(columns) {
        let newColumns = columns.slice();
        newColumns = newColumns.map(column => {
            let newColumn = column;
            newColumn.render = (text, record, index) => { //前端元素转义
                const columnDataIndex = newColumn.dataIndex;
                let valueSpan = record[columnDataIndex + "span"] !== undefined ? record[columnDataIndex + "span"] : record[columnDataIndex];
                if(columnDataIndex == "reportname") {
                    let reportid  = record['randomFieldId'];
                    valueSpan = `<a href="javaScript:window.openFullWindowHaveBar('/spa/workflow/static/index.html#/main/workflow/standardCustomViewReport?reportid=${reportid}')">${valueSpan}</a>`
                    return <div className="wea-url" dangerouslySetInnerHTML={{__html: valueSpan}}/>
                }
                return (
                    <div className="wea-url" dangerouslySetInnerHTML={{__html: valueSpan}}/>
                )
            }
            return newColumn;
        });
        return newColumns
    }
}